<template>
  <div v-if="backtestResults.equityCurve && backtestResults.equityCurve.length" class="backtest-results">
    <el-divider></el-divider>
    <h3>回测结果摘要</h3>
    
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="result-item">
            <div class="result-label">总收益率</div>
            <div class="result-value" :class="{ 'up': backtestSummary.totalReturn > 0, 'down': backtestSummary.totalReturn < 0 }">
              {{ backtestSummary.totalReturn > 0 ? '+' : '' }}{{ backtestSummary.totalReturn.toFixed(2) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="result-item">
            <div class="result-label">年化收益率</div>
            <div class="result-value" :class="{ 'up': backtestSummary.annualReturn > 0, 'down': backtestSummary.annualReturn < 0 }">
              {{ backtestSummary.annualReturn > 0 ? '+' : '' }}{{ backtestSummary.annualReturn.toFixed(2) }}%
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="result-item">
            <div class="result-label">夏普比率</div>
            <div class="result-value">{{ backtestSummary.sharpeRatio.toFixed(2) }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="result-item">
            <div class="result-label">最大回撤</div>
            <div class="result-value">{{ backtestSummary.maxDrawdown.toFixed(2) }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="result-item">
            <div class="result-label">胜率</div>
            <div class="result-value">{{ backtestSummary.winRate.toFixed(2) }}%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div class="result-item">
            <div class="result-label">总交易次数</div>
            <div class="result-value">{{ backtestSummary.totalTrades }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BacktestSummary',
  props: {
    backtestResults: {
      type: Object,
      required: true
    },
    backtestSummary: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.backtest-results {
  margin-top: 20px;
}

.result-item {
  text-align: center;
  padding: 20px 0;
}

.result-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.result-value {
  font-size: 20px;
  font-weight: bold;
}

.result-value.up {
  color: #14b143;
}

.result-value.down {
  color: #ef232a;
}
</style>